import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import HttpRequest from '@/utils/HttpRequest';
import { defaultDomain } from '@/config/domain';
import { ConsoleView } from '@/pages/group/ConsoleView';
import { DeleteGroupView } from '@/pages/group/DeleteGroupView';
import UpdateConsumer from "@/pages/group/UpdateConsumer";

const Group: React.FC = () => {

const actionRef=useRef();

  const queryParams = [
    { title: '订阅组',align:'center', width:200,dataIndex: 'group', search: true,
      render: (text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined) => (
        <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          {text}
        </div>
      )
    },
    { title: '数量',align:'center', dataIndex: 'count', search: false},
    { title: '版本',align:'center', dataIndex: 'version', search: false},
    { title: '类型',align:'center', dataIndex: 'messageModel', search: false},
    { title: '模式',align:'center', dataIndex: 'consumeType', search: false},
    { title: 'TPS',align:'center', dataIndex: 'consumeTps', search: false},
    { title: '延迟',align:'center', dataIndex: 'diffTotal', search: false},
    {
      title: '操作',align:'center', dataIndex: 'action', search: false,
      render: (dom: any, record: any) => {
        return ([
            <ConsoleView key={'consoleView'} record={record} />, '  ',
            <UpdateConsumer key={'updateConsumer'} record={record} />, '  ',
            <DeleteGroupView key={'groupDeleteView'} record={record} action={actionRef.current} />, '  ',
          ]
        );
      }
    },
    ];
  return (
      <PageContainer key='group_c'>
        <ProTable
          rowKey='group'
          search={{ labelWidth: 'auto' }}
          scroll={{ x: 800 }}
          pagination={{ pageSize: 20 }}
          toolBarRender={false}
          actionRef={actionRef}

          request={async (params) => {
            const res = await HttpRequest({
              baseURL: defaultDomain,
              url: '/consumer/groupList.query',
              method: 'GET',
              params: params,
            });
            console.log("res=",res);
            // @ts-ignore
            const data = res.data;
            return { ...data, data: data };
          }}
          // @ts-ignore
          columns={queryParams} />
    </PageContainer>
  );
};

export default Group;
